<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>TP原创商城卖家端登录</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0">

	<script src="/static/merchant/js/jquery-min.js"></script>
	<link rel="stylesheet" href="/static/merchant//layui/css/layui.css">
	<script type="text/javascript" src="/static/merchant//layui/layui.js"></script>
	<link rel="stylesheet/less" type="text/css" href="/static/merchant//css/index.less" />
	<script src="/static/merchant//js/less.js"></script>

</head>

<body>
	<main class="LoginMain">
		<div class="logo  ">
			<img src="/static/merchant/images/logo.png">
		</div>

		<div class="login-container layui-main">
			<div class="login-card">
				<div class="card-header">
					<img src="/static/merchant/images/loginText.png">
				</div>
				<div class="layui-card-body">
					<h1>手机号登录</h1>
					<!-- 切换登录方式 tab -->

					<div class="layui-tabs" lay-filter="loginTab" lay-options="{headerMode:'normal'}">
						<ul class="layui-tabs-header">
							<li class="layui-this">密码登录</li>
							<li>验证码登录</li>
						</ul>
						<div class="layui-tabs-body">
							<!-- 密码登录面板 -->
							<div class="layui-tabs-item layui-show">
								<form class="layui-form" id="passwordLoginForm">
									<div class="layui-form-item">
										<div class="">
											<input type="text" name="phone" placeholder="请输入手机号" class="layui-input"
												id="passwordPhone">
										</div>
										<div class="error-message" id="passwordPhoneError">请输入正确的手机号</div>
									</div>

									<div class="layui-form-item">
										<div class="">
											<input type="password" name="password" placeholder="请输入密码"
												class="layui-input" id="passwordInput" lay-affix="eye">
										</div>
										<div class="error-message" id="passwordError">请输入密码</div>
									</div>

									<div class="layui-form-item">
										<button type="button" class="layui-btn layui-btn-fluid" id="passwordLoginBtn"
											disabled>登录</button>
									</div>
									<div class="layui-form-item">
										<div id="passwordAgree" class="agree">
											<input type="checkbox" name="agree" value="1" lay-filter="agree">
											<div class="checkText">
												我已阅读并同意<a lay-on="xieyi">《用户协议》</a>和<a lay-on="yinsi">《隐私政策》</a>
											</div>
										</div>
									</div>
									<div class="layui-form-item signup">
										<a class="" href="/merchant/register.html">立即注册</a>
										<!-- <a class="forget-pwd" href="/merchant/forget-password.html" style="float:right">忘记密码?</a> -->
									</div>
								</form>
							</div>

							<!-- 验证码登录面板 -->
							<div class="layui-tabs-item">
								<form class="layui-form" id="captchaLoginForm">
									<div class="layui-form-item">
										<input type="text" name="phone" placeholder="请输入手机号" class="layui-input"
											id="captchaPhone">
										<div class="error-message" id="captchaPhoneError">请输入正确的手机号</div>
									</div>

									<div class="layui-form-item">
										<div class="layui-row">
											<div class="layui-col-xs7">
												<input type="text" name="captcha" placeholder="请输入验证码"
													class="layui-input" id="captchaInput">
												<div class="error-message" id="captchaError">请输入验证码</div>
											</div>
											<div class="layui-col-xs5">
												<div class="btnBlock">
													<button type="button" class="layui-btn layui-btn-normal"
														id="getCaptchaBtn">获取验证码</button>
												</div>
											</div>
										</div>
									</div>

									<div class="layui-form-item">
										<button type="button" class="layui-btn layui-btn-fluid" id="captchaLoginBtn"
											disabled>登录</button>
									</div>
									<div class="layui-form-item">
										<div id="captchaAgree" class="agree">
											<input type="checkbox" name="agree" value="1" lay-filter="agree">
											<div class="checkText">
												我已阅读并同意<a lay-on="xieyi">《用户协议》</a>和<a lay-on="yinsi">《隐私政策》</a>
											</div>
										</div>
									</div>
									<div class="layui-form-item signup">
										<a class="" href="/merchant/register.html">立即注册</a>
									</div>
								</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="foot">
			<a href="https://beian.mps.gov.cn/#/query/webSearch">辽公网安备21029602000910</a> | <a
				href="https://beian.miit.gov.cn/">辽ICP备2023009263号-2</a><br>
			© 2023 All rights reserved
		</div>
	</main>
	<script src="/static/merchant/js/base.js"></script>
	<script>
		layui.use(function () {
			var form = layui.form;
			var layer = layui.layer;
			var tabs = layui.tabs;
			var util = layui.util;
			var $ = layui.$;

			// 协议弹窗
			util.on('lay-on', {
				'xieyi': function () {
					layer.alert('内容内容内容', {
						title: '用户协议',
						skin: 'xieyiDialog'
					});
				},
				'yinsi': function () {
					layer.alert('内容内容内容', {
						title: '隐私协议',
						skin: 'xieyiDialog'
					});
				}
			});

			// 手机号验证正则
			const PHONE_REGEX = /^1[3-9]\d{9}$/;
			// 密码验证正则 (至少6位，包含字母和数字)
			// const PASSWORD_REGEX = /^(?=.*[A-Za-z])(?=.*\d)[A-Za-z\d]{6,}$/;
			const PASSWORD_REGEX = /^.{6,}$/;
			// 验证码验证正则 (6位数字)
			const CAPTCHA_REGEX = /^\d{6}$/;

			// 全局变量，记录当前登录方式
			var currentLoginType = 1; // 1:密码登录 2:验证码登录

			// 通用表单验证函数
			function validateForm(formType) {
				let isValid = true;
				currentLoginType = formType === 'password' ? 1 : 2;

				if (formType === 'password') {
					const phone = $('#passwordPhone').val();
					const password = $('#passwordInput').val();
					const agree = $('#passwordAgree .layui-form-checked').length > 0;

					// 验证手机号
					if (!PHONE_REGEX.test(phone)) {
						$('#passwordPhoneError').show();
						isValid = false;
					} else {
						$('#passwordPhoneError').hide();
					}

					// 验证密码
					if (!password) {
						$('#passwordError').text('请输入密码').show();
						isValid = false;
					} else if (!PASSWORD_REGEX.test(password)) {
						$('#passwordError').text('密码至少6位且包含字母和数字').show();
						isValid = false;
					} else {
						$('#passwordError').hide();
					}

					// 移除这里的协议检查
					// if (!agree) {
					//     layer.msg('请先同意用户协议和隐私政策', {icon: 2});
					//     isValid = false;
					// }

					// 更新登录按钮状态（不再依赖协议勾选状态）
					$('#passwordLoginBtn').prop('disabled', !(PHONE_REGEX.test(phone) && password && PASSWORD_REGEX.test(password)));

				} else if (formType === 'captcha') {
					const phone = $('#captchaPhone').val();
					const captcha = $('#captchaInput').val();
					const agree = $('#captchaAgree .layui-form-checked').length > 0;

					// 验证手机号
					if (!PHONE_REGEX.test(phone)) {
						$('#captchaPhoneError').show();
						isValid = false;
					} else {
						$('#captchaPhoneError').hide();
					}

					// 验证验证码
					if (!captcha) {
						$('#captchaError').text('请输入验证码').show();
						isValid = false;
					} else if (!CAPTCHA_REGEX.test(captcha)) {
						$('#captchaError').text('验证码必须是6位数字').show();
						isValid = false;
					} else {
						$('#captchaError').hide();
					}

					// 移除这里的协议检查
					// if (!agree) {
					//     layer.msg('请先同意用户协议和隐私政策', {icon: 2});
					//     isValid = false;
					// }

					// 更新登录按钮状态（不再依赖协议勾选状态）
					$('#captchaLoginBtn').prop('disabled', !(PHONE_REGEX.test(phone) && captcha && CAPTCHA_REGEX.test(captcha)));
				}

				return isValid;
			}


			// 协议勾选监听
			form.on('checkbox(agree)', function(data){
				if(data.elem.id === 'passwordAgree'){
					validateForm('password');
				} else {
					validateForm('captcha');
				}
			});

			// 密码登录表单输入监听
			$('#passwordPhone, #passwordInput').on('input', function () {
				validateForm('password');
			});

			// 验证码登录表单输入监听
			$('#captchaPhone, #captchaInput').on('input', function () {
				validateForm('captcha');
			});

			// 获取验证码按钮点击事件
			$('#getCaptchaBtn').on('click', function () {
				const phone = $('#captchaPhone').val();
				const $btn = $(this);

				if (!PHONE_REGEX.test(phone)) {
					layer.msg('请输入正确的手机号', {icon: 2});
					return;
				}

				// 显示加载中
				$btn.addClass('layui-btn-disabled');
				layer.msg('验证码发送中...', {icon: 16, time: 2000});

				// 发送获取验证码请求
				ajaxRequest('/merchant/merchant-send-captcha', {
					phone: phone,
					type: 'login' // 验证码类型:login登录
				}, 'POST', $btn, function (response) {
					layer.msg('验证码已发送，请注意查收', {icon: 1});
					
					// 倒计时逻辑
					let countdown = 60;
					$btn.prop('disabled', true).text(`${countdown}s后重试`);
					
					const timer = setInterval(() => {
						countdown--;
						$btn.text(`${countdown}s后重试`);
						
						if (countdown <= 0) {
							clearInterval(timer);
							$btn.prop('disabled', false).text('获取验证码');
						}
					}, 1000);
					
				}, function(error) {
					$btn.removeClass('layui-btn-disabled');
				});
			});

			// 密码登录按钮点击事件
			$('#passwordLoginBtn').on('click', function () {
				const agree = $('#passwordAgree .layui-form-checked').length > 0;
				if (!agree) {
					layer.msg('请先同意用户协议和隐私政策', {icon: 2});
					return;
				}
				
				if (!validateForm('password')) return;
				
				const $btn = $(this);
				const phone = $('#passwordPhone').val();
				const password = $('#passwordInput').val();
				
				$btn.addClass('layui-btn-disabled');
				layer.msg('登录中...', {icon: 16, time: false});
				
				// 发送登录请求
				ajaxRequest('/merchant/merchant-user-login', {
					phone: phone,
					password: password,
					type: 1 // 1:密码登录
				}, 'POST', $btn, function (response) {
					layer.msg('登录成功，正在跳转...', {icon: 1});
					
					// 跳转到首页
					setTimeout(function() {
						window.location.href = '/';
					}, 1500);
					
				}, function(error) {
					$btn.removeClass('layui-btn-disabled');
					layer.msg(error)
				});
			});

			// 验证码登录按钮点击事件
			$('#captchaLoginBtn').on('click', function () {
				const agree = $('#captchaAgree .layui-form-checked').length > 0;
				if (!agree) {
					layer.msg('请先同意用户协议和隐私政策', {icon: 2});
					return;
				}
				if (!validateForm('captcha')) return;
				
				const $btn = $(this);
				const phone = $('#captchaPhone').val();
				const captcha = $('#captchaInput').val();
				
				$btn.addClass('layui-btn-disabled');
				layer.msg('登录中...', {icon: 16, time: false});
				
				// 发送登录请求
				ajaxRequest('/merchant/merchant-user-login', {
					phone: phone,
					captcha: captcha,
					type: 2 // 2:验证码登录
				}, 'POST', $btn, function (response) {
					layer.msg('登录成功，正在跳转...', {icon: 1});
	
					
					// 跳转到首页
					setTimeout(function() {
						window.location.href = '/';
					}, 1500);
					
				}, function(error) {
					$btn.removeClass('layui-btn-disabled');
					layer.msg(error);
				});
			});

			// 初始化验证
			validateForm('password');

			// 监听tab切换事件
			tabs.on('afterChange(loginTab)', function (data) {
				if (data.index === 0) {
					validateForm('password');
				} else {
					validateForm('captcha');
				}
			});
			
			// 回车键登录
			$(document).keydown(function(event) {
				if (event.keyCode === 13) {
					if (currentLoginType === 1) {
						$('#passwordLoginBtn').click();
					} else {
						$('#captchaLoginBtn').click();
					}
				}
			});
		});
	</script>
</body>

</html>